<template>
  <!-- 产量分析 -->
  <BaseMainSlot>
    <template v-slot:content>
      <div class="analysis-list">
        <CategoryBar :categoryList="categoryList" @categoryBar="categorySearch" />
        <div class="search-list">
          <div class="analy-list-itemone">
            <div class="itemone-one">
              <div class="search-line">
                选择药品：
                <el-select filterable clearable v-model="searchone.materialObj" value-key="materialId" filterable clearable>
                  <el-option v-for="(item, index) in meterialList" :key="index" :label="item.name" :value="{
                      materialId: item.materialId,
                      materialName: item.name,
                    }" />
                </el-select>
              </div>
              <div v-if="noselecttypestau === 1" class="search-line">
                选择年份：
                <el-date-picker v-model="searchone.selectYear" type="year" format="yyyy" value-format="yyyy"
                  placeholder="请选择年份" clearable />
              </div>
              <div v-else class="search-line">
                选择月份：
                <el-date-picker v-model="searchone.selectMonth" type="month" format="M月" value-format="M"
                  placeholder="请选择月份" clearable />
              </div>
              <div v-if="noselecttypestau === 1" class="search-line">
                选择月份：
                <el-date-picker v-model="searchone.selectMonthList" type="months" format="MM" value-format="M"
                  placeholder="请选择月份(多选)" clearable />
              </div>
              <div v-else class="search-line">
                选择年份：
                <el-date-picker v-model="searchone.selectYearList" type="years" format="yyyy年" value-format="yyyy"
                  placeholder="请选择年份(多选)" clearable />
              </div>
              <div class="search-btn search-btns" @click.stop="queryChartData()">
                <i class="el-icon-circle-check"></i>
                <p>查询</p>
              </div>
            </div>
          </div>
        </div>
        <div ref="zklchart" class="zchart">
          <zhchart v-if="testchartlist.xAxisdata.length > 0" ref="testyuy" :cdata="testchartlist" :nowwidth="'100%'"
            :nowheight="'100%'" />
          <div class="zcharts" v-else>
            请先选择物料 - 月份 - 年份 预计效果：（同比分析：多个年份中同一个月份的用药对比；环比分析：同一年份中多个月份的用药对比；）
            <zhchart ref="testyuy" :cdata="testchartlists" :nowwidth="'100%'" :nowheight="'100%'" />
          </div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>
<script>
import CategoryBar from "@/components/CategoryBar/index.vue";
import HistoricalMedicationComparisonApi from "@/api/health-management/historical-medication-comparison";
import MaterialApi from "@/api/basic-info-manage/material";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import { mymixin } from "@/utils/mixin";
import zhchart from "@/components/Echarts/components/linechart/chart.vue";
import * as echarts from "echarts";
export default {
  name: "YieldAnalysis",
  components: { BaseMainSlot, CategoryBar, zhchart },
  mixins: [mymixin],
  data () {
    return {
      // 当前选择状态
      noselecttypestau: 0,
      // 对比搜索项1
      searchone: {
      },
      meterialList: [],
      categoryList: [
        { name: "同比分析", id: 0 },
        { name: "环比分析", id: 1 }
      ],
      testchartlist: {
        xAxisdata: [],
        xData: ["产量（万斤）"],
        seriesData: [
          {
            name: "产量（万斤）",
            type: "bar",
            data: [],
            barMaxWidth: 60,
            itemStyle: {
              normal: {
                borderRadius: [10, 10, 0, 0],
                // barBorderRadius: 5,
                // barBorderRadius: [10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            }
          }
        ]
      },
      testchartlists: {
        xAxisdata: ["产量1", "产量2"],
        xData: ["产量1", "产量2"],
        seriesData: [
          {
            name: "产量（万斤）",
            type: "bar",
            data: [300, 60],
            barMaxWidth: 60,
            itemStyle: {
              normal: {
                borderRadius: [10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            }
          }
        ]
      }
    };
  },
  watch: {
  },
  mounted () {
    // this.queryChartData();
    this.queryMaterial();
  },
  methods: {
    queryMaterial () {
      MaterialApi.queryByCondition({ materialTypeNo: 'drug' }).then(res => {
        this.meterialList = res.data;
      })
    },
    queryChartData () {
      let params = {}
      // 处理年月份格式
      // console.log(this.searchone);
      if (this.searchone.materialObj) params.materialId = this.searchone.materialObj.materialId
      if (this.searchone.selectMonth) params.compareMonth = this.searchone.selectMonth
      if (this.searchone.selectYear) params.compareYear = this.searchone.selectYear
      if (this.searchone.selectYearList) params.compareYearList = this.searchone.selectYearList
      if (this.searchone.selectMonthList) params.compareMonthList = this.searchone.selectMonthList

      if (!params.materialId ||
        (this.noselecttypestau === 1 && (!params.compareYear || !params.compareMonthList)) ||
        (this.noselecttypestau === 0 && (!params.compareMonth || !params.compareYearList))
      ) {
        this.$message.warning("请先选择")
        return
      }

      if (this.noselecttypestau === 1) {
        HistoricalMedicationComparisonApi.mom(params).then(res => {
          if (res.data) {
            console.log(this.searchone.materialObj);
            this.handingzhexiangone(res.data)
          }
        });
      } else {
        HistoricalMedicationComparisonApi.yoy(params).then(res => {
          if (res.data) {
            console.log(this.searchone.materialObj);
            this.handingzhexiangone(res.data)
          }
        })
      }

    },
    // 折线图数据处理
    handingzhexiangone (list) {
      if (list === undefined || list.length === 0) {
        return;
      }
      let xAxisdata = [];
      // console.log(typeof this.searchone.materialObj.materialName);
      let xData = [this.searchone.materialObj.materialName];
      let seriesData = [
        {
          name: this.searchone.materialObj.materialName,
          type: "bar",
          data: [],
          barMaxWidth: 60,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                { offset: 0, color: "#04FA99" },
                { offset: 1, color: "#3EACE5" }
              ])
            }
          }
        }
      ];
      list.forEach(item => {
        seriesData[0]["data"].push(item.num);
        let ggdate = item.date;
        xAxisdata.push(ggdate);
      });
      this.testchartlist = {
        xAxisdata: xAxisdata,
        xData: xData,
        seriesData: seriesData,
        unitName: '条'
      };
    },
    // 当前选择的时id：0-同比分析 1-环比分析
    categorySearch (item) {
      this.noselecttypestau = item.id;
      this.searchone = {}
    },
  }
};
</script>
<style lang="scss" scoped>
::v-deep {
  .zhcontent {
    overflow: hidden !important;
  }
}

.search-list {
  width: 100%;
  // height: 100px;
  margin: 20px 0;
  overflow: auto;
}

.analysis-list {
  width: 100%;
  height: 100%;
  // border: rgb(55, 211, 55) solid 1px;
  font-size: 20px;

  // overflow: auto;
  .analy-list-itemone {
    position: relative;
    width: 100%;
    display: flex;
    height: 50px;
    flex-direction: row;

    // justify-content: space-between;
    .itemone-one {
      width: 80%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin: 5px;

      .search-line {
        display: flex;
        white-space: nowrap;
        height: 50px;
        line-height: 50px;
      }
    }

    .itemone-two {
      width: 20%;
      display: flex;
      flex-direction: row;
      align-items: center;

      .linetwo-one {
        cursor: pointer;
        width: 30px;
        height: 30px;
        border: #3ed2d2 1px solid;
        text-align: center;
        line-height: 30px;
        color: #3ed2d2;
        margin-left: 10px;
        margin-right: 2px;
      }

      .linetwo-two {
        cursor: pointer;
        width: 100px;
        height: 50px;
        margin-left: 10px;
        // background-image: url("~@/assets/analy.png");
        background-position: center;
        background-repeat: no-repeat;
      }
    }
  }
}

.zchart {
  // background-color: turquoise;
  width: 100%;
  margin-top: 10px;
  height: calc(100% - 200px);

  .zcharts {
    width: 100%;
    height: 100%;
  }

  // background-color: turquoise;
}

::v-deep .el-input--medium .el-input__icon {
  height: 46px;
  line-height: 36px;
}
</style>
